<template>
  <div>
    <div style="text-align:right;margin-bottom: 20px">
      <el-button :disabled="selectedRows.length === 0" type="primary" @click="handleAdd">准入申请</el-button>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button @click="handleGetList" icon="el-icon-refresh" />
      </el-tooltip>
    </div>
    <e-table
      ref="eTable"
      @tableCheck="handleTableCheck"
      @getList="handleGetList"
      :tableData="tableData"
      :columns="columns"
      :loading="loading"
      :total="total"
    >
      <el-table-column slot="expand" type="expand">
        <template slot-scope="scope">
          <el-row class="tableExpandRow" :gutter="20" slot="expandedRowRender">
            <el-col :span="18">
              <div>
                统一社会信用代码：
                <span>{{ scope.row.uscc }}</span>
              </div>
              <div>
                营业执照名称：
                <span>{{ scope.row.businessName }}</span>
              </div>
              <div>
                <span style="margin-right: 165px">
                  法人代表：
                  <span>{{ scope.row.legalRepresentative }}</span>
                </span>
                <span>
                  营业期限：
                  <span>{{ scope.row.businessBegin }}--{{ scope.row.businessEnd }}</span>
                </span>
              </div>
              <div>
                地址：
                <span>{{ scope.row.businessAddress }}</span>
              </div>
              <div>
                <span>经营范围：</span>
                <span>{{ scope.row.businessScope }}</span>
              </div>
              <el-row style="margin-bottom: 0">
                <el-col :span="4">
                  <span>
                    联系人：
                    <span>{{ scope.row.linkmanName ? `${scope.row.linkmanName}(${scope.row.linkmanTitle})` : null }}</span>
                  </span>
                </el-col>
                <el-col :span="4">
                  <span>电话：</span>
                  <span>{{ scope.row.linkmanTel }}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">
                  <span>
                    创建人：
                    <span>{{ scope.row.createUser }}</span>
                  </span>
                </el-col>
                <el-col :span="6">
                  <span>创建时间：</span>
                  <span>{{ scope.row.createTime ? formatTime(scope.row.createTime) : null }}</span>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <img
                @click="handlePreview(scope.row)"
                style="width:300px"
                :src="scope.row.savePath"
                alt="营业执照图片"
              />
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column slot="selection" align="center" type="selection" width="55" />
      <el-table-column show-overflow-tooltip slot="info" align="center" label="供应商">
        <template slot-scope="scope">
          <detail-button class="fl" :record="scope.row">{{ scope.row.supplierName }}</detail-button>
        </template>
      </el-table-column>
      <el-table-column slot="image" label="营业执照" width="80" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-if="scope.row.businessLicense"
            @click="handlePreview(scope.row)"
          >已上传</el-button>
          <span v-else>未上传</span>
        </template>
      </el-table-column>

      <el-table-column slot="state" label="状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="judgeColor(scope.row.entryState)">{{ judgeState(scope.row.entryState) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column slot="action" fixed="right" width="50" align="center">
        <template slot-scope="scope">
          <el-dropdown>
            <a class="el-dropdown-link">
              <i class="el-icon-menu"></i>
            </a>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleEdit(scope.row, true)">
                <a>编辑</a>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </e-table>
    <preview-modal ref="previewModal" />
  </div>
</template>

<script>
import DetailButton from '@/components/DetailButton'
import { querySupplierInfoByDeptId, updateSupplierEntry } from '@/api/supplier'
import { openNotification, judgeState, judgeColor } from '@/utils/util'
import demoImg from '@/assets/license.jpeg'
import PreviewModal from '@/components/PreviewModal'

export default {
  components: {
    PreviewModal,
    DetailButton
  },
  data() {
    return {
      demoImg,
      selectedRows: [],
      queryParam: {
        pageNo: 1,
        pageSize: 10
      },
      loading: false,
      // 表头
      columns: [
        { slot: 'expand' },
        { slot: 'selection' },
        { slot: 'info' },
        {
          label: '类型',
          width: '100px',
          prop: 'supplierTypeName'
        },
        {
          label: '性质',
          width: '120px',
          prop: 'supplierNatureName'
        },
        {
          label: '规模',
          width: '120px',
          prop: 'supplierScaleName'
        },
        {
          label: '所属行业',
          width: '150px',
          prop: 'supplierIndustryName'
        },
        { slot: 'image' },
        { slot: 'state' },
        { slot: 'action' }
      ],
      tableData: [],
      total: 1
    }
  },
  mounted() {
    this.handleGetList()
  },
  methods: {
    judgeState(state) {
      return judgeState(state)
    },
    judgeColor(state) {
      return judgeColor(state)
    },
    handleTableCheck(arr) {
      this.selectedRows = arr
      console.log('selectedRows', this.selectedRows)
    },
    // 编辑
    handleEdit(row, bool) {
      this.$router.push({
        name: 'supplierEdit',
        params: { obj: row, type: 'edit' }
      })
    },
    // 准入申请
    handleAdd() {
      let param = []
      this.selectedRows.map(v => {
        param.push({ ...v, applyTime: new Date(), applyUser: 'xm', applyUserId: 'xm' })
      })
      updateSupplierEntry(param).then(res => {
        if (res.state === '000000') {
          openNotification('success', '准入申请成功')
          this.$refs.eTable.clear()
          this.selectedRows = []
          this.handleGetList()
        }
      })
    },
    // 预览图片处理
    handlePreview(record) {
      this.$refs.previewModal.show([record.savePath])
    },
    async handleGetList(param = {}) {
      this.loading = true
      const res = await querySupplierInfoByDeptId({ ...this.queryParam, ...param })

      if (res && res.data.records.length > 0) {
        const {
          state,
          data: { records, total }
        } = res
        this.tableData = records
        this.total = total
      } else {
        this.tableData = []
        this.total = 1
      }
      this.loading = false
    }
  }
}
</script>
